@charset "UTF-8";

@import "common/common";


.wrap{
    position: relative;
    width: 100%;
    height: 100%;
    img{
        width: 100%;
        height: 100%;
    }
}

//加载页
#page_load{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/load/load_bg.jpg) no-repeat center;
    background-size:cover ;
    overflow: hidden;
    //人物
    .load_figure{
        position: absolute;
        bottom: r(180px);
        left: 0;
        right: 0;
        margin: 0 auto;
        width: r(667px);
        height: r(960px);
        z-index: 1;
    }
    //火箭
    .load_rocket{
        position: absolute;
        left: r(238px);
        bottom: r(200px);
        width: r(157px);
        height: r(116px);
        transform: rotate(60deg);
        z-index: 2;
    }
    .rocket_active{
        transform-origin: 400% 440%;
        animation: in-round 6s cubic-bezier(.83,-0.33,.07,.67) infinite;
        @keyframes in-round{
            0%{
                transform: rotate(0deg);
            }
            25%{
                transform: rotate(60deg);
                transition-timing-function: ease-in;
            }
            50%{
                transform: rotate(180deg);
            }
            75%{
                transform: rotate(240deg);
            }
            100%{
                transform: rotate(360deg);
            }
        }
    }
    //旗帜
    .load_flag{
        position: absolute;
        right: r(12px);
        bottom: r(250px);
        width: r(113px);
        height: r(165px);
        z-index: 5;
    }
    //星球
    .load_star{
        position: absolute;
        right: 0px;
        bottom: 0px;
        width: r(598px);
        height: r(291px);
    }
    //提示牌
    .load_sign{
        position: absolute;
        left: r(221px);
        bottom: 0px;
        width: r(259px);
        height: r(198px);
        z-index: 5;
    }
    .load_sign.active{
        animation: slide-down 1s cubic-bezier(0.930,0.730,0.450,0.150) both ;
        @keyframes slide-down{
            0%{
                transform: translateY(r(-1004px));
            }
            100%{
                transform: translateY(0);
            }
        }
    }
    //跳过按钮
    .load_btn{
        position: absolute;
        right: r(15px);
        bottom: r(25px);
        width: r(134px);
        height: r(79px);
        opacity: 1;
        z-index: 5;
        background: url(../img/load/skip.png) no-repeat center;
        background-size:contain ;
    }
    .load_btn.active{
        animation: bouce-in-right 1.1s both;
        @keyframes bouce-in-right{
            0%{
                transform: translateX(r(-750px));
                animation-timing-function: ease-in;
                opacity: 0;
            }
            38%{
                transform: translateX(0);
                animation-timing-function: ease-out;
                opacity: 1;
            }
            55%{
                transform: translateX(r(50px));
                animation-timing-function: ease-in;
            }
            72%,90%,100%{
                transform: translateX(0);
                animation-timing-function: ease-out;
            }
            81%{
                transform: translateX(r(32px));
                animation-timing-function: ease-out;
            }
            95%{
                transform: translateX(r(8px));
                animation-timing-function: ease-out;
            }
        }
    }
}
